<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>设备授权</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
	form div.input-group{
		padding:5px;
	}
	form div.input-group .input-group-addon{
		width:10%;
	}
	td button{
		margin:10px;
	}
</style>
<body>
	<div class="container" id="app">
		<!-- <div class="row">
			<h3>将设备授权之后微信可以连接该设备</h3>
		</div> -->
		 <div class="row">
		     <p class="h4">新设备投入使用时应该先向微信平台申请DeviceID,获取DeviceID之后然后修改具体连接参数,具体连接参数在本页面下部分</p>
		 	 <div class="text-center">
			 	 <button class="btn btn-primary" id="BtnApplyDevID"  v-on:click="getqrcode">点击获取申请DeviceID</button>
			 	 <p class="text-success">{{deviceid}}</p>
		 	 </div>
		 </div>
	     <div class="row">
		     <p class="h4">已经注册的设备ID</p>
		     <table class="table table-bordered">
		     	<tr><td>设备ID</td><td>绑定URL</td><td>操作</td></tr>
		     	<tr v-for="(item, index) in devicelist">
			   		<td style="width:20%">{{ item.deviceid}}</td>
			   		<td style="width:20%">{{ item.qrticket}}</td>
			   		<td style="width:60%"><button class="btn btn-primary">二维码</button><button v-on:click="getattr(item.deviceid)" class="btn btn-primary" >属性</button></td>
			 	</tr>
		     </table>
		 </div>
		 <div class="row">
		 	<form action="../api/biz/authdev" method="POST" target="_blank" role="form">
		 		<p class="h5">此ID由设备授权接口从微信平台获取</p>
			 	<div class="input-group">
					  <span class="input-group-addon">已经注册设备ID</span>
					  <input type="text" name="id" class="form-control" aria-label="id" v-model="deviceid">
				</div>
				
				<p class="h5">MAC地址是指设备蓝牙芯片的MAC地址</p>
				 <div class="input-group">
					  <span class="input-group-addon">MAC地址</span>
					  <input type="text" name="mac" class="form-control" aria-label="MAC" value="34C059B4AF33">
				</div>
				<p class="h5">
					<span>支持以下四种连接协议：</span> 
					<ul>
						<li>android classic bluetooth – 1</li> 
						<li>ios classic bluetooth – 2</li> 
						<li>ble – 3</li> 
						<li>wifi -- 4</li>
					</ul> 
					<span>一个设备可以支持多种连接类型，用符号"|"做分割，客户端优先选择靠前的连接方式（优先级按|关系的排序依次降低），举例：</span> 
					<ul>
						<li>1：表示设备仅支持andiod classic bluetooth </li>
						<li>1|2：表示设备支持andiod 和ios 两种classic bluetooth，但是客户端优先选择andriod classic bluetooth 协议，如果andriod classic bluetooth协议连接失败，再选择ios classic bluetooth协议进行连接
						（注：安卓平台不同时支持BLE和classic类型）</li>
					</ul>
				</p>
				 <div class="input-group">
					  <span class="input-group-addon">连接协议</span>
					  <input type="text" name="connect_protocol" class="form-control" aria-label="MAC" value="3">
				</div>
				
				<p class="h5">
					<span>auth加密方法，目前支持两种取值：</span> 
					<ul>
						<li>0：不加密 </li>
						<li>1：AES加密（CBC模式，PKCS7填充方式）</li>
					</ul>
				</p>
				<div class="input-group">
					  <span class="input-group-addon">Auth加密方法</span>
					  <input type="text" name="crypt_method" class="form-control" aria-label="MAC" value="0">
				</div>
				<p class="h5">
						auth version，设备和微信进行auth时，会根据该版本号来确认auth buf和auth key的格式（各version对应的auth buf及key的具体格式可以参看“客户端蓝牙外设协议”），该字段目前支持取值： 0：不加密的version 1：version 1
				</p>
				 <div class="input-group">
					  <span class="input-group-addon">Auth_ver版本</span>
					  <input type="text" name="auth_ver" class="form-control" aria-label="MAC" value="0">
				</div>
				<p class="h5">
					auth及通信的加密key，第三方需要将key烧制在设备上（128bit），格式采用16进制串的方式（长度为32字节），不需要0X前缀，如： 1234567890ABCDEF1234567890ABCDEF
				</p>
				 <div class="input-group">
					  <span class="input-group-addon">通信密钥</span>
					  <input type="text" name="authkey" class="form-control" aria-label="" value="123456789">
				</div>
				
				<p class="h5">
					连接策略，32位整型，按bit位置位，目前仅第1bit和第3bit位有效（bit置0为无效，1为有效；第2bit已被废弃），且bit位可以按或置位（如1|4=5），各bit置位含义说明如下： 
					1：（第1bit置位）在公众号对话页面，不停的尝试连接设备 
					4：（第3bit置位）处于非公众号页面（如主界面等），微信自动连接。当用户切换微信到前台时，可能尝试去连接设备，连上后一定时间会断开
				</p>
				 <div class="input-group">
					  <span class="input-group-addon">连接策略</span>
					  <input type="text" name="conn_strategy" class="form-control" aria-label="MAC" value="1">
				</div>
				
				<p class="h5">
					断开策略，目前支持： 1：退出公众号页面时即断开连接 2：退出公众号之后保持连接不断开
				</p>
				 <div class="input-group">
					  <span class="input-group-addon">断开策略</span>
					  <input type="text" name="close_strategy" class="form-control" aria-label="MAC" value="1">
				</div>
				
				
				<p class="h5">
						表示mac地址在厂商广播manufature data里含有mac地址的偏移，取值如下： -1：在尾部、 -2：表示不包含mac地址 其他：非法偏移
				</p>
				<div class="input-group">
					  <span class="input-group-addon">Mac偏移</span>
					  <input type="text" name="manu_mac_pos" class="form-control" aria-label="MAC" value="-1">
				</div>
				<p class="h5">
					表示mac地址在厂商serial number里含有mac地址的偏移，取值如下： -1：表示在尾部 -2：表示不包含mac地址 其他：非法偏移
				</p>
				<div class="input-group">
					  <span class="input-group-addon">序列号Mac偏移</span>
					  <input type="text" name="ser_mac_pos" class="form-control" value="-1">
				</div>
				<div class="input-group" style="display:none">
					 
					  <span class="input-group-addon">操作类型</span>
					  <input type="text" name=op_type class="form-control" value="1">
				</div>
				<div class="text-center">
					<input type="submit" value="更新设备信息" class="btn btn-primary">
				</div>
			</form>
		 </div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script>
	!function(w){
		var app = new Vue({
			  el: '#app',
			  data: {
			    deviceid: '...',
			    devicelist:[]
			  },
			  created:function(){
			  	  this.getdeviceidlist(null);
			  	},
			  methods:{
					getqrcode: function (event){
						var url = "../api/biz/getqr";
						var that = this;
						//$.ajax({
						//	url:url,
						//	success:function(data){
						//		that.deviceid = data.deviceId;
						//	}
						//})
					
					},
					getattr:function(id){
						console.log(id);
					}
					,
					getdeviceidlist:function(evt){
						var listurl = "../api/biz/devicelist";
						var that  = this;
						$.ajax({
							url:listurl,
							success:function(data){
								console.log(data);
								that.devicelist = data;
							}
						})
					},
			  }
			});
		//end app
		
	}(window)
</script>
</html>